﻿<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Welcome John Doe</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="">

		<!-- Le styles -->
		<link href="css/bootstrap.css" rel="stylesheet">
		<style>
			body {
				padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
			}
			
			.avatars {
				width: 40px;
				height: 40px;
			}
		</style>
		<link href="css/bootstrap-responsive.css" rel="stylesheet">

		<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
		<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->

		<!-- Fav and touch icons -->
		<link rel="shortcut icon" href="../assets/ico/favicon.ico">
		<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
		<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
	</head>

	<body>
		<div class="navbar navbar-inverse navbar-fixed-top">
			<div class="navbar-inner">
				<div class="container">
					<a class="brand" href="index.html"><img src="img/logo.png"></a>
					<div class="nav-collapse collapse">
						<ul class="nav">
							<li class="active"><a href="#">Accueil</a></li>
							<li><a href="#about">Rechercher des photos</a></li>
							<li><a href="#contact">Inscription</a></li>
						</ul>
						<div class="btn-group pull-right">
							<a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#">
								John Doe
								<span class="caret"></span>
							</a>
							<ul class="dropdown-menu">
								<li><a>G&eacute;rer mes informations</a></li>
								<li><a>G&eacute;rer mes photos</a></li>
								<li><a>D&eacute;connexion</a></li>
							</ul>
						</div>			
					</div><!--/.nav-collapse -->
				</div>
			</div>
		</div>

		<div class="container">
			<div class="page-header">
				<h1><img src="img/header-logo.png"/></br><small>Partagez votre vision du monde (ou autre slogan alakon)</small></h1>
			</div>
			
			<div class="index">
				<div class="row">
					<div class="span3">					
						<div class="well sidebar-nav">
							<ul class="nav nav-list">
								<li class="active"><a href="#">Accueil</a></li>
								<li class="nav-header">Mon compte</li>
								<li><a href="#">Ajouter des photos</a></li>
								<li><a href="#">Modifier mon compte</a></li>
								<li><a href="#">Voir mon profil</a></li>
								<li class="nav-header">Mes contacts</li>
								<li><a href="#">Voir mes contacts</a></li>
							</ul>
						</div>					
					</div>
					<div class="span9">
						<div>						
							<img src="img/cartman.png" alt="cartman" class="avatars" />
							<h4>Cartman a ajouté de nouvelles photos à son album South Park</h4>
							<p>(3 photos)</p>					
						</div>
						<hr>						
						<div>						
							<img src="img/cartman.png" alt="cartman" class="avatars" />
							<h4>Cartman a ajouté de nouvelles photos à son album South Park</h4>
							<p>(3 photos)</p>					
						</div>
						<hr>
					</div>
				</div>
			</div>
			
			<hr>

			<footer>
				<p>&copy; Fotostep 2012</p>
			</footer>
		</div> <!-- /container -->

		<!-- JAVASCRIPT -->
		<script src="js/jquery.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>
